<template>
  <div class="manage" style="background-color: #E9F3FB; height: 100%">
    <div>
      <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#FCE4EC"
          text-color="#333"
          active-text-color="#007AFF">
        <!-- 添加 SVG Logo -->
        <el-menu-item index="0" class="logo-item">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play-circle" style="height: 30px; vertical-align: middle;">
            <circle cx="12" cy="12" r="10"></circle>
            <polygon points="10 8 16 12 10 16 10 8"></polygon>
          </svg>
        </el-menu-item>

        <el-menu-item index="1" @click="change()">推荐</el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            动画
          </template>
          <el-menu-item @click="categary" index="2.1">动画</el-menu-item>
          <el-menu-item index="2.2">番剧</el-menu-item>
        </el-submenu>
        <el-submenu index="11">
          <template slot="title">
            音乐
          </template>
          <el-menu-item index="11.1">音乐</el-menu-item>
          <el-menu-item index="11.2">番剧</el-menu-item>
        </el-submenu>
        <el-menu-item index="3" @click="changecon">关注</el-menu-item>
        <el-menu-item index="4" @click="changehis()">历史播放</el-menu-item>
        <el-menu-item index="7" @click="tomanage()">个人中心</el-menu-item>
        <el-menu-item index="6" class="sesrch">
          <el-avatar src="头像URL" style="margin-right: 10px;"></el-avatar>
          <el-button type="text" command='logout' @click="handleClick">退出登录</el-button>
        </el-menu-item>
        <el-menu-item index="5" class="sesrch">
          <el-input
              placeholder="请输入内容"
              v-model="input"
              style="width: 200px; margin-bottom: 0px"
              @keyup.enter.native="search()">
            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
          </el-input>
        </el-menu-item>
      </el-menu>
    </div>

    <div class="body" style="height: 100%; background-color: #ffffff; padding: 0px; margin: auto">
      <el-scrollbar id="el-scrollbar__wrap" ref="scroll" class="scrollbar-wrapper" wrap-style="overflow-x:hidden;">
        <child-component :is="Component"
                         :vlnow="vlnow" :cate="cate" :gu="guan"
                         :tui="tj" :tt="compdate" :callback="onCallback"
                         :play="video" :vurl="url" :hiscallback="hiscallback">

        </child-component>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import videolist from '../../components/videoList.vue'
import Videopaly from "@/components/Videopaly.vue";
import History from "@/components/History.vue";

export default {
  components: {
    videolist, Videopaly, History
  },
  data() {
    return {
      vlnow:0,
      cate: '',
      tj: 1,
      guan: {},
      url: '',
      video: {},
      input: '',
      activeIndex: '2024/7/2',
      activeIndex2: '1',
      compdate: '',
      Component: '',
      currentDate: new Date()
    };
  },
  mounted: function () {
    this.Component = 'videolist'
  },
  watch: {
    video() {
      this.url = 'http://127.0.0.1:9091/hls/' + this.video.name + '/' + this.video.name + '.m3u8'
      this.Component = 'Videopaly'
    }
  },
  methods: {
    tomanage() {
      this.$router.push("/infor:id")
    },
    handleClick(command) {
      this.$cookies.remove('user')
      this.$router.push('/login')
    },
    onCallback(date) {
      this.video = date
    },
    hiscallback(data){
      this.video = data
    },
    handScroll() {

    },
    changehis() {
      this.Component = 'History'
    },
    handleSelect(key, keyPath) {
      this.vlnow=2
      if (key == 2.1 || key == 2.2) {
        this.cate = '动画'
      } else if (key == 11.1 || key == 11.2) {
        this.cate = '音乐'
      }
    },
    categary() {

    },
    changecon() {
      this.Component = 'videolist'
      this.vlnow=3
      this.guan = { uid: this.$cookies.get("user").id }
    },
    change() {
      this.vlnow=1
      this.Component = 'videolist'
      this.tj++
    },
    search() {

      this.compdate = this.input

    }
  }
};
</script>

<style scoped>
/* 禁止整个页面的滚动 */
html, body {
  height: 100%;
  margin: 0;
overflow: hidden;
}
.body{
  height: 100%;
  overflow-y: auto;
}

/* 允许el-scrollbar的父元素的滚动 */
.el-scrollbar__wrap {
  overflow-y: auto;
}

.el-row {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.sesrch {
  float: right;
  display: flex;
  align-items: center;
}

.el-card {
  margin-left: 2%;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

/* 自定义 el-menu 样式 */
.el-menu-demo {
  border-bottom: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
  padding: 0 20px;


}

.el-menu-item, .el-submenu__title {
  font-size: 14px;
  padding: 0 20px;
}

.el-menu-item.is-active {
  background-color: #f0f0f0 !important; /* 激活项背景颜色 */
  border-bottom: 2px solid #007AFF; /* 激活项底部边框 */
}

.el-menu-item:hover, .el-submenu__title:hover {
  background-color: #f0f0f0; /* 悬停背景颜色 */
}

.el-avatar {
  vertical-align: middle;
}

.el-button--text {
  color: #007AFF;
  font-weight: 500;
}

.el-input__inner {
  border-radius: 16px; /* 圆角输入框 */
  border: 1px solid #dcdcdc;
  padding: 0 16px;
}

.el-input-group__append {
  border-radius: 16px; /* 圆角按钮 */
  border: 1px solid #dcdcdc;
  background-color: #f9f9f9;
  padding: 0 16px;
}

.el-button--text:hover {
  background-color: #f0f0f0; /* 按钮悬停背景颜色 */
}
</style>
